<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/templates/main.xhtml">

    <ui:define name="content">
        <f:metadata>
            <f:event listener="#{negotiationsListBean.initLoadNegotiationBean()}" type="preRenderView" />
        </f:metadata>

        <h:form id="formNegotiations">
            <p:panel id="panelNegotiationTable" header="Negociaciones vigentes" style="margin-top:10px;">
                <p:dataTable id="negotiationsTable" emptyMessage="No se encontraron negociaciones"
                             value="#{negotiationsListBean.negotiationsList}" var="negotiation"
                             >
                    <p:column headerText="N° Pago">
                        <h:outputText value="#{negotiation.negotiationDetail.paymentNumber}"/>
                    </p:column>

                    <p:column headerText="Monto">
                        <h:outputText value="#{negotiation.negotiationDetail.amount}" >
                            <f:convertNumber currencyCode="CLP" type="currency" currencySymbol="$"/>
                        </h:outputText>
                    </p:column>

                    <p:column headerText="">
                        <h:commandLink value="Ver detalle" 
                                       action="#{negotiationDetailBean.initLoadNegotiationDetailBean(negotiation.negotiationDetail.paymentNumber)}" />
                    </p:column>
                </p:dataTable>
            </p:panel>
        </h:form>
    </ui:define>
    
    <p:tab id="itemsSelectionTab"
    title="#{addItemsProperties.itemsSelectionTabTitle}">
    <p:panel header="#{addItemsProperties.itemsSelectionTabInstructions}">

        <h:form id="addItemsForm">
            <p:growl id="addItemMessages" />
            <h:panelGrid columns="3" cellpadding="10">
                <h:outputLabel value="#{addItemsProperties.itemIDLabel}" />
                <p:inputText value="#{addItemsBean.newItemID}" />
                <p:commandButton icon="ui-icon ui-icon-search"
                    action="#{addItemsBean.addItem()}" update="addItemsForm" />
            </h:panelGrid>

            <p:dataTable id="itemsTable" var="item"
                value="#{addItemsBean.itemsList}"
                selection="#{addItemsBean.selectedItem}">

                <f:facet name="header">
                                                #{addItemsProperties.itemsTableHeader}
                                            </f:facet>

                <p:column style="width:2%">
                    <p:commandButton type="button" icon="ui-icon-close"
                        update="addItemMessages, itemsTable"
                        action="#{addItemsBean.deleteItem()}">
                        <f:setPropertyActionListener value="#{item}"
                            target="#{addItemsBean.selectedItem}" />
                    </p:commandButton>
                </p:column>

                <p:column>
                    <f:facet name="header">
                                                    #{addItemsProperties.itemIDColumnHeader}                                                
                                                </f:facet>
                                                #{item.itemID}                                            
                                            </p:column>

                <p:column>
                    <f:facet name="header">
                                                    #{addItemsProperties.itemTypeColumnHeader}                                                
                                                </f:facet>
                                                #{item.itemTypeID.description}                                            
                                            </p:column>

                <p:column>
                    <f:facet name="header">
                                                    #{addItemsProperties.itemFamilyColumnHeader}                                                
                                                </f:facet>
                                                #{item.itemFamilyID.description}                                            
                                            </p:column>

                <p:column>
                    <f:facet name="header">
                                                    #{addItemsProperties.itemDescriptionColumnHeader}                                                
                                                </f:facet>
                                                #{item.description}                                            
                                            </p:column>
            </p:dataTable>
            <div class="centered-button">
                <p:commandButton value="#{defaultProperties.nextButtonLabel}"
                    action="#{addItemsBean.validateItemList()}"
                    update="addItemMessages" />
            </div>
            <p:dialog id="newItemDialog"
                header="#{addItemsProperties.newItemHeader}"
                visible="#{addItemsBean.showNewItemDialog}" resizable="false"
                showEffect="fade" hideEffect="fade" modal="true" appendTo="@(body)">

                <h:panelGrid columns="2" cellpadding="7">
                    <h:outputFormat value="#{addItemsProperties.newItemIDLabel}">
                        <f:param value="#{addItemsBean.newItemID}" />
                    </h:outputFormat>

                    <h:outputLabel />

                    <h:outputLabel value="#{addItemsProperties.newItemTypeLabel}" />
                    <p:selectOneMenu value="#{addItemsBean.selectedItemType}"
                        converter="itemTypeConverter">
                        <f:selectItem
                            itemLabel="#{addItemsProperties.newItemTypeSelectorDefault}"
                            itemValue="" />
                        <f:selectItems value="#{addItemsBean.itemTypesList}" />
                    </p:selectOneMenu>

                    <h:outputLabel value="#{addItemsProperties.newItemFamilyLabel}" />
                    <p:selectOneMenu value="#{addItemsBean.selectedItemFamily}"
                        converter="itemFamilyConverter">
                        <f:selectItem
                            itemLabel="#{addItemsProperties.newItemFamilySelectorDeafult}"
                            itemValue="" />
                        <f:selectItems value="#{addItemsBean.itemFamiliesList}" />
                    </p:selectOneMenu>

                    <h:outputLabel
                        value="#{addItemsProperties.newItemDescriptionLabel}" />
                    <h:panelGrid columns="1" cellpadding="5">
                        <p:inputTextarea rows="5" cols="30" counter="remainingCharacters"
                            counterTemplate="#{addItemsProperties.charactersRemainingLabel}"
                            autoResize="false" maxlength="100"
                            value="#{addItemsBean.newItemDescription}" />
                        <h:outputText id="remainingCharacters" />
                    </h:panelGrid>

                    <h:outputLabel />

                    <div class="centered-button">
                        <p:commandButton value="#{addItemsProperties.newItemButtonLabel}"
                            action="#{addItemsBean.addNewItem()}"
                            update=":addItemsTabView:addItemsForm:itemsTable" />
                    </div>
                </h:panelGrid>
            </p:dialog>
        </h:form>
    </p:panel>

</p:tab>

</ui:composition>